<template>
  <a-modal :title="title" :width="800" :visible="visible" :confirmLoading="confirmLoading" @ok="handleOk" @cancel="handleCancel" cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchW">
          <a-row :gutter="24">
            <a-col :xl="12" :lg="12" :md="12" :sm="24">
              <a-form-item label="文章搜索">
                <a-input placeholder="文章搜索" v-model="queryParam.keywords" />
              </a-form-item>
            </a-col>
            <a-col :xl="12" :lg="12" :md="12" :sm="24">
              <a-form-item label="分类查询">
                <a-select v-model="queryParam.categoryId" placeholder="全部类型">
                  <a-select-option :value="item.id" v-for="(item, index) in categoryUl" :key="index">{{ item.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xl="12" :lg="12" :md="12" :sm="24">
              <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                <a-button type="primary" @click="searchW" icon="search">查询</a-button>
                <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!-- table区域-begin -->
      <div>
        <a-table ref="table" size="middle" rowKey="id" :columns="tableColumns" :dataSource="tableData" :pagination="ipagination" :loading="loading" @change="handleTableChange">
          <!--操作-->
          <span slot="action" slot-scope="text, record">
            <a-button type="primary" @click="chooseMeter(record,record.id)" :disabled="record.disabled">选择</a-button>
          </span>
        </a-table>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
import { getList } from '@/api/blog/blogClass';
import ApiTree from '@/api/blog/blogList';
import { Slime } from '@/mixins/slime';
export default {
  name: 'meterQueryModal',
  mixins: [Slime],
  data() {
    return {
      title: '详情',
      tableColumns: [
        { title: '名称', dataIndex: 'title', align: 'center' },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
        },
      ],
      tableData: [],
      queryBuild: {},
      //
      categoryUl: [],
      existenceList:[],
    };
  },
  created() {},
  methods: {
    //初始加载
    search(list) {
      this.existenceList = list
      this.visible = true;
      this.loadData();
      this.categoryData();
    },
    //加载的文章
    loadData(arg) {
      if (arg === 1) {
        this.ipagination.current = 1;
      }
      this.loading = true;
      let params = this.getQueryParams(); // 查询条件
      let existenceList = this.existenceList;
      ApiTree.getList(params)
        .then((res) => {
          let data = res.result.records;
          const tableData = data.map(function (item) {
            let dis = false
            existenceList.map(function (obj) {
              if(item.id == obj.id){
                dis = true;
              }
            })
            item = { 
              id:item.id,
              title:item.title,
              img:item.img,
              disabled:dis,
            };
            return item;
          });
          this.tableData = tableData;
          // 页码
          this.ipagination.total = res.result.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    //搜索文章
    searchW(){
      let params = this.getQueryParams(); // 查询条件
      let that = this
      if(params.keywords){
        that.ipagination.current = 1;
        that.loading = true;
        let existenceList = that.existenceList;
        ApiTree.getSearch(params)
          .then((res) => {
            let data = res.result;
            const tableData = data.map(function (item) {
              let dis = false
              existenceList.map(function (obj) {
                if(item.id == obj.id){
                  dis = true;
                }
              })
              item = { 
                id:item.id,
                title:item.title,
                img:item.img,
                disabled:dis,
              };
              return item;
            });
            that.tableData = tableData;
            // 页码
            that.ipagination.total = 1;
          })
          .finally(() => {
            that.loading = false;
          });
      }else{
        that.searchQuery()
      }
    },
    //分类加载
    categoryData() {
      getList().then((res) => {
        let data = res.result;
        this.categoryUl = data;
      });
    },
    //选中文章
    chooseMeter(record,id) {
      this.$emit('chooseBlog', record);
      let tableData = this.tableData
      for(let i=0;i<tableData.length;i++){
        if(tableData[i].id == id){
          this.tableData[i].disabled = true
        }
      }
    },
    close() {
      this.visible = false;
    },
    handleOk() {
      this.close();
    },
    handleCancel() {
      this.close();
    },
  },
};
</script>

<style scoped>
.build_input {
  text-align: center;
  border-left: 0px;
  border-right: 0px;
}
.build_input > input {
  border-left: 0 !important;
  border-right: 0 !important;
}
.build_input_icon {
  width: 30px;
  border-left: 0;
  pointer-events: none;
  background-color: #fff;
}
</style>